<template>
  <div class="related-courses-list">
    <div class="related-courses-list-title">
      <strong>
        相关课程
      </strong>
    </div>
    <div class="related-courses-list-content no-bar">
      <img
        @click="goCourse(item)"
        :src="parseResourceUrl(item.cover_url)"
        :alt="item.product_name"
        :title="item.product_name"
        class="related-courses-list-item cu"
        v-for="item in list"
        :key="item.product_id"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      zlaBtn: {
        key_name: '',
        key_content: ''
      }
    }
  },
  watch: {
    // 之了埋点
    zlaBtn: {
      handler() {
        this.sendZlaClick()
      },
      deep: true
    },
    list: {
      async handler(val) {
        await this.$nextTick()
        // 滚动回顶部
        let el = document.querySelector('.related-courses-list-content')
        if (el) {
          el.scrollTop = 0
        }
        // console.log(val)
      },
      deep: true
    }
  },
  methods: {
    // 之了数据点击
    sendZlaClick() {
      this.keyClick({
        ...this.zlaBtn
      })
    },
    goCourse({ product_name, product_id }) {
      if (product_name) {
        this.zlaBtn = {
          key_name: '推荐课程',
          key_content: product_name
        }
      }

      let baseUrl = location.origin
      this.goTo(baseUrl + '/course_detail.html', {
        query: { product_id },
        target: '_blank',
        watch: true
      })
    }
  }
}
</script>

<style scoped>
.related-courses-list {
  width: 312px;
  background: #ffffff;
  padding-top: 24px;
}
.related-courses-list-title {
  position: relative;
  height: 30px;
  font-size: 22px;
  font-weight: 600;
  color: #383838;
  line-height: 30px;
  padding-left: 20px;
}
.related-courses-list-title::after {
  display: block;
  content: '';
  width: 3px;
  height: 24px;
  background: #3480ff;
  border-radius: 2px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.related-courses-list-content {
  margin-top: 24px;
  max-height: 350px;
  overflow-y: auto;
  padding: 0 20px 24px 20px;
  max-width: 312px;
  overflow-x: hidden;
}

.related-courses-list-item {
  display: block;
  width: 272px;
  height: 152px;
  background: linear-gradient(180deg, #52abff 0%, #3480ff 100%);
  border-radius: 12px;
  margin-bottom: 16px;
}
.related-courses-list-item:nth-last-of-type(1) {
  margin-bottom: 0;
}
</style>
